<template>
  <div class="container">
    <el-row style="padding:20px 25px">
      <el-col :span="2" class="manage-header-title">经营概况</el-col>
      <el-col :span="6" style="display:flex">
        <div :class="activeIndex == 1 ? 'manage-menu-active' : 'manage-menu'" @click="activeIndex = 1">实 时</div>
        <div :class="activeIndex == 2 ? 'manage-menu-active' : 'manage-menu'" @click="activeIndex = 2">昨 日</div>
        <div :class="activeIndex == 3 ? 'manage-menu-active' : 'manage-menu'" @click="activeIndex = 3">近7天</div>
        <div :class="activeIndex == 4 ? 'manage-menu-active' : 'manage-menu'" @click="activeIndex = 4">近30天</div>
      </el-col>
      <el-col :span="16" class="manage-time">
        <span>更新时间：</span>
        <span>{{ time }}</span>
      </el-col>
    </el-row>
    <div>
      <manage-item :activeIndex="activeIndex" :totalData="tData"/>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index.js'

import ManageItem from './ManageItem'

export default {
  name: 'ManageStatus',
  components: {
    ManageItem
  },
  props: {
    totalData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      activeIndex: 1,
      time: parseTime(new Date()),
      tData: {
        turnover: 0,
        visitor: 0,
        order: 0,
        average_price: 0,
      }
    }
  },
  watch: {
    totalData(val) {
      this.tData = {
        turnover: val.today.today_turnover,
        visitor: val.today.today_visitor,
        order: val.today.today_order,
        average_price: val.today.today_average_price
      }
    },
    activeIndex(val) {
      if(val === 1) {
        this.tData = { 
          turnover: this.totalData.today.today_turnover,
          visitor: this.totalData.today.today_visitor,
          order: this.totalData.today.today_order,
          average_price: this.totalData.today.today_average_price
        }
      }else if(val === 2) {
        this.tData = {
          turnover: this.totalData.yesterday.today_turnover,
          visitor: this.totalData.yesterday.today_visitor,
          order: this.totalData.yesterday.today_order,
          average_price: this.totalData.yesterday.today_average_price
        }
      }else if(val === 3) {
        this.tData = {
          turnover: this.totalData.week.seven_day_turnover,
          visitor: this.totalData.week.seven_day_visitor,
          order: this.totalData.week.seven_day_order,
          average_price: this.totalData.week.seven_day_average_price
        }
      }else{
        this.tData = { 
          turnover: this.totalData.month.thirty_days_turnover,
          visitor: this.totalData.month.thirty_days_visitor,
          order: this.totalData.month.thirty_days_order,
          average_price: this.totalData.month.thirty_days_average_price
        }
      }
    }
  },
}
</script>

<style lang="css" scoped>
.container{
  width: 100%;
  /* height: 208px; */
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  white-space: nowrap;
  /*padding: 0 0 0 0;*/
}
.manage-header-title{
  font-size: 17px;
  font-family: '微软雅黑';
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.manage-menu{
  flex: 1;
  font-size: 14px;
  color: #8e8e8e;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
}
.manage-menu-active{
  flex: 1;
  font-size: 14px;
  color: #8e8e8e;
  text-align: center;
  cursor: pointer;
  color: #409eff;
  font-weight: 600;
}
.manage-menu:hover{
  color: #40a0ffb6;
}
.manage-time{
  font-size: 14px;
  color: #8e8e8e;
  text-align: right;
  padding: 0 25px 0 0;
}
</style>